<#include "/include/macros.ftl">
<@header></@header>
<div class="clearfix"></div>
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <ol class="breadcrumb">
            <li><a href="/">首页</a></li>
            <li class="active">康复管理</li>
        </ol>
        <div class="x_panel">
            <div class="x_content">
                <div class="<#--table-responsive-->">
                    <div class="btn-group hidden-xs" id="toolbar">
                        <@shiro.hasPermission name="child:add">
                        <button id="btn_add" type="button" class="btn btn-default" title="添加孩子">
                            <i class="fa fa-plus"></i> 添加孩子
                        </button>
                        </@shiro.hasPermission>
                        <@shiro.hasPermission name="child:batchDelete">
                            <button id="btn_delete_ids" type="button" class="btn btn-default" title="删除选中">
                                <i class="fa fa-trash-o"></i> 批量删除
                            </button>
                        </@shiro.hasPermission>
                    </div>
                    <table id="tablelist">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!--弹框-查看评估内容-->
<div class="modal fade modal-fullscreen" id="selectVersion" tabindex="-1" role="dialog" aria-labelledby="selectVersionLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content" style="width:600px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="selectVersionLabel">评估内容</h4>
            </div>
            <div class="modal-body">
                       <table id="versionlist">
                       </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"> 关闭</i></button>
            </div>
        </div>
    </div>
</div>

<!--弹框评估框-->
<div class="modal fade bs-example-modal-sm" id="selectEvaluationContent" tabindex="-1" role="dialog" aria-labelledby="selectEvaluationContentLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="selectEvaluationContentLabel">开始评估</h4>
            </div>
            <div class="modal-body">
                <form id="boxEvalForm">
                    <div class="zTreeDemoBackground left">
                        <ul id="treeEvaluation" class="ztree"></ul>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" id="btnRefreshSmall" class="btn btn-default" data-glyphicon="glyphicon-refresh">刷新</button>
	            <button type="button" id="btnSaveSmall" class="btn btn-default btn-primary" data-glyphicon="glyphicon-ok">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"> 关闭</i></button>
            </div>
        </div>
    </div>
</div>

<!--上传视频弹框-->
<div class="modal fade" id="chooseFile" tabindex="-1" role="dialog" aria-labelledby="addroleLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="addroleLabel">选择视频</h4>
            </div>
            <div class="modal-body">
                            <button type="button" class="btn btn-success" id="file-btn">选择视频</button>
                             <input id="cover-vedio-file" type="file" name="file" style="display: none">
                              <input id="cover-vedio-input" type="hidden" name="coverImage">
                              <div class="preview" class="fa-2x">
                                 <video id="videoPlay1" width="262" height="195" src="video/audio.mp4" poster="img/video.jpg" loop="loop" x-webkit-airplay="true" webkit-playsinline="true">
							                        您的浏览器暂不支持播放该视频，请升级至最新版浏览器。
							     </video>
                              </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"> 关闭</i></button>
                <button type="button" class="btn btn-success" data-dismiss="modal"><i class="fa fa-hand-o-up"> 确定</i></button>
            </div>
        </div>
    </div>
</div>
<!--上传视频弹框-->

<!--/弹框-->
<!--添加用户弹框-->
<div class="modal fade" id="addOrUpdateModal" tabindex="-1" role="dialog" aria-labelledby="addroleLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="addroleLabel">添加孩子</h4>
            </div>
            <div class="modal-body">
                <form id="addOrUpdateForm" class="form-horizontal form-label-left" novalidate>
                    <input type="hidden" name="id">
                    
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="childId">孩子编号: <span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" class="form-control col-md-7 col-xs-12" name="childId" id="childId" required="required" placeholder="请输入孩子编号"/>
                        </div>
                    </div>
                    
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="childName">孩子姓名: <span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" class="form-control col-md-7 col-xs-12" name="childName" id="childName" required="required" placeholder="请输入用户名"/>
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="nickname">昵称:<span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" class="form-control col-md-7 col-xs-12" name="nickName" id="nickname" required="required" placeholder="请输入昵称"/>
                        </div>
                    </div>
                    
                     <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="sex">性别: <span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <ul class="list-unstyled list-inline">
                                <li>
                                    <div class="radio">
                                        <label> <input type="radio" class="square" name="sex" required="required" value="0"> 男 </label>
                                    </div>
                                </li>
                                <li>
                                    <div class="radio">
                                        <label> <input type="radio" class="square" name="sex" required="required" value="1"> 女</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="radio">
                                        <label> <input type="radio" class="square" name="sex" required="required" value="2"> 秘密</label>
                                    </div>
                                </li>
                                
                            </ul>
                        </div>
                    </div>
                    
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="birthday">出生日期 <span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <div class='input-group date' id='myDatepicker'>
                                <input type='text' class="form-control" required="required" id="birthday" name="birthday" placeholder="请输入出生日期"/>
                                 <span class="input-group-addon">
                                   <span class="glyphicon glyphicon-remove"></span>
                                 </span>
                                <span class="input-group-addon">
                                   <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                                
                            </div>
                        </div>
                    </div>
                    
                    
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="mobile">手机: <span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="tel" class="form-control col-md-7 col-xs-12" name="mobile" id="mobile" required="required" data-validate-length-range="6,20" placeholder="请输入手机号"/>
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="phone">座机: <span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="tel" class="form-control col-md-7 col-xs-12" name="phone" id="phone" required="required" data-validate-length-range="6,20" placeholder="请输入座机号"/>
                        </div>
                    </div>
                    
                     <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="cardno">身份证号:<span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" class="form-control col-md-7 col-xs-12" name="cardNo" required="required" id="cardno" placeholder="请输入身份证号"/>
                        </div>
                    </div>
                    
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">邮箱:<span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="email" class="form-control col-md-7 col-xs-12" name="email" required="required" id="email" placeholder="请输入邮箱"/>
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="address">地址:<span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" class="form-control col-md-7 col-xs-12" name="address" id="address" required="required" placeholder="请输入地址"/>
                        </div>
                    </div>
                     <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="father">父亲:<span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" class="form-control col-md-7 col-xs-12" name="father" id="father" required="required" placeholder="请输入父亲姓名"/>
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="monther">母亲:<span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" class="form-control col-md-7 col-xs-12" name="monther" id="monther" required="required" placeholder="请输入母亲姓名"/>
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="extEvaluation">外部评估:<span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <textarea class="form-control col-md-7 col-xs-12" id="extEvaluation" name="extEvaluation"  required="required" placeholder="请输入外部评估类型"></textarea>
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="intEvaluation">内部评估:<span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <select name="intEvaluation" id="intEvaluation" class="form-control col-md-7 col-xs-12" required="required">
                            	<option value="">请选择</option>
                                <option value="1.1">脑伤痉挛型(实际年龄在2岁以内)</option>
                                <option value="1.2">脑伤痉挛型(实际年龄在2~15岁)</option>
                                <option value="2.1">脑伤徐动型(实际年龄在2岁以内)</option>
                                <option value="2.2">脑伤徐动型(实际年龄在2岁~3岁以间)</option>
                                <option value="2.3">脑伤徐动型(实际年龄在3岁以上)</option>
                                <option value="3.1">标准脑伤共济失调型</option>
                                <option value="3.2">发育迟缓共济失调型(脑伤及罕见疾病儿)</option>
                                <option value="4">轻度脑伤松弛型(广-发育落后)</option>
                                <option value="5">轻度发育迟缓松弛型或自闭症个案</option>
                                <option value="6">标准发育迟缓松弛型(广-发育落后)</option>
                                <option value="7">非脑伤松弛型(实际年龄超过2岁)</option>
                            </select>
                            
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"> 关闭</i></button>
                <button type="button" class="btn btn-success addOrUpdateBtn"><i class="fa fa-save"> 保存</i></button>
            </div>
        </div>
    </div>
</div>
<!--/添加用户弹框-->
<@footer>
    <script>
        /**
         * 操作按钮
         * @param code
         * @param row
         * @param index
         * @returns {string}
         */
        function operateFormatter(code, row, index) {
            var currentUserId = '${user.id}';
            var trChildId = row.id;
            var operateBtn = [
                '<@shiro.hasPermission name="child:edit"><a class="btn btn-xs btn-primary btn-update" data-id="' + trChildId + '"><i class="fa fa-edit"></i>编辑</a></@shiro.hasPermission>',
                '<@shiro.hasPermission name="child:eval"><a class="btn btn-xs btn-warning" href="/child/evaluationContext/' +trChildId + '"><i class="fa fa-user-md"></i>评估</a></@shiro.hasPermission>',
                '<@shiro.hasPermission name="child:upload"><a class="btn btn-xs btn-success btn-uploadfile" data-id="' + trChildId + '"><i class="fa  fa-arrows-alt"></i>上传视频</a></@shiro.hasPermission>',
            ];
                operateBtn.push('<@shiro.hasPermission name="child:delete"><a class="btn btn-xs btn-danger btn-remove" data-id="' + trChildId + '"><i class="fa fa-trash-o"></i>删除</a></@shiro.hasPermission>');
                operateBtn.push('<@shiro.hasPermission name="child:view"><a class="btn btn-xs btn-info btn-view" data-id="' + trChildId + '"><i class="fa fa-circle-thin"></i>查看</a></@shiro.hasPermission>')
            return operateBtn.join('');
        }
         
         /**上传视频功能*/
         $("#file-btn").click(function () {
        	    var $this = $(this);
        	    $("#cover-vedio-file").click();
          });
         $("input[name=file]").uploadPreview({ imgContainer: ".preview", width: 190, height: 200, suffix: ["doc"] });
         
        $(function () {
        	
       	   $('#myDatepicker').datetimepicker({
       			 language:  'zh-CN',  
       			 minView: "month",//设置只显示到月份
       		     format: 'yyyy-mm-dd',
                 ignoreReadonly: true,
                 allowInputToggle: true,
                 autoclose:true,//选中关闭
                 pickerPosition: "bottom-left"
             });
        	  
            var options = {
                url: "/child/list",
                getInfoUrl: "/child/get/{id}",
                updateUrl: "/child/edit",
                removeUrl: "/child/remove",
                createUrl: "/child/add",
                saveRolesUrl: "/child/saveUserRoles",
                columns: [
                    {
                        checkbox: true
                    }, {
                        field: 'id',
                        title: '编号',
                        editable: false,
                    }, {
                        field: 'childId',
                        title: '孩子编号',
                        visible :false,
                        editable: false,
                    }, {
                        field: 'childName',
                        title: '孩子姓名',
                        editable: false,
                    }, {
                        field: 'nickName',
                        title: '昵称',
                        editable: true,
                    }, {
                        field: 'sex',
                        title: '性别',
                        editable: true,
                        formatter: function (code) {
                        	if(code == '0')return '男';
                        	if(code == '1')return '女';
                        	if(code == '2')return '秘密';
                        	return '未知';
                        }
                    }, {
                        field: 'birthday',
                        title: '出生日期',
                        editable: true,
                        formatter: function (code) {
                            return new Date(code).format("yyyy-MM-dd")
                        }
                    }, {
                        field: 'email',
                        title: '邮箱',
                        editable: true
                    }, {
                        field: 'cardNo',
                        title: '身份证号',
                        editable: true,
                        cellStyle:{  
                            css:{"color":"#3276b1"}  //调整td字体颜色
                        } ,
                        formatter: function (value, row, index){ // 单元格格式化函数
                      		  var div = "<div style='width:100px;'>"+value+"</div>";//调列宽，在td中嵌套一个div，调整div大小
                          	  return div;
                        }
                    }, {
                        field: 'mobile',
                        title: '手机号',
                        editable: true
                    }, {
                        field: 'phone',
                        title: '座机号',
                        visible :false,
                        editable: true
                    }, {
                        field: 'father',
                        title: '父亲',
                        visible :false,
                        editable: true
                    }, {
                        field: 'monther',
                        title: '母亲',
                        editable: true
                    }, {
                        field: 'address',
                        title: '地址',
                        editable: true
                    }, {
                        field: 'extEvaluation',
                        title: '外部评估',
                        editable: true
                    }, {
                        field: 'intEvaluation',
                        title: '内部评估',
                        editable: true,
                        formatter: function (code) {
                        	if(code == '1.1')return '脑伤痉挛型(实际年龄在2岁以内)';
                        	if(code == '1.2')return '脑伤痉挛型(实际年龄在2~15岁)';
                        	if(code == '2.1')return '脑伤徐动型(实际年龄在2岁以内)';
                        	if(code == '2.2')return '脑伤徐动型(实际年龄在2岁~3岁以间)';
                        	if(code == '2.3')return '脑伤徐动型(实际年龄在3岁以上)';
                        	if(code == '3.1')return '标准脑伤共济失调型';
                        	if(code == '3.2')return '发育迟缓共济失调型(脑伤及罕见疾病儿)';
                        	if(code == '4')return '轻度脑伤松弛型(广-发育落后)';
                        	if(code == '5')return '轻度发育迟缓松弛型或自闭症个案';
                        	if(code == '6')return '标准发育迟缓松弛型(广-发育落后)';
                        	if(code == '7')return '非脑伤松弛型(实际年龄超过2岁)';
                        }
                    }, {
                        field: 'operate',
                        title: '操作',
                        formatter: operateFormatter //自定义方法，添加操作按钮
                    }
                ],
                modalName: "孩子"
            };
            //1.初始化Table
            $.tableUtil.init(options);
            //2.初始化Button的点击事件
            $.buttonUtil.init(options);

            /**上传评估视频*/
            $('#tablelist').on('click', '.btn-uploadfile', function () {
                console.log("开始上传评估视频");
                var $this = $(this);
                var childId = $this.attr("data-id");
                $('#chooseFile').modal('show');
            });
            
            /* 查看评估内容 */
            $('#tablelist').on('click', '.btn-view', function () {
                console.log("查看评估内容");
                var $this = $(this);
                var childId = $this.attr("data-id");
                       $('#versionlist').children().remove(); 
                        $('#versionlist').bootstrapTable('destroy').bootstrapTable({
                            url: '/child/versionAll/'+childId,
                            method: 'post',                      //请求方式（*）
                            striped: true,                      //是否显示行间隔色
                            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                            contentType: "application/x-www-form-urlencoded", // 发送到服务器的数据编码类型, application/x-www-form-urlencoded为了实现post方式提交
                            sortable: false,                     //是否启用排序
                            sortOrder: "asc",                   //排序方式
                            sortStable: true,                   // 设置为 true 将获得稳定的排序
                            queryParams: {'version.childId':childId},//传递参数（*）
                            queryParamsType: '',
                            pagination: true,                   //是否显示分页（*）
                            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                            pageNumber: 1,                       //初始化加载第一页，默认第一页
                            pageSize: 20,                       //每页的记录行数（*）
                            pageList: [20, 40, 50, 100, 150],        //可供选择的每页的行数（*）
                            search: true,                       //是否启用搜索框 根据sidePagination选择从前后台搜索
                            strictSearch: true,                 //设置为 true启用 全匹配搜索，否则为模糊搜索
                            searchOnEnterKey: true,            // 设置为 true时，按回车触发搜索方法，否则自动触发搜索方法
                            minimumCountColumns: 1,             //最少允许的列数
                            showColumns: true,                  //是否显示 内容列下拉框
                            showRefresh: true,                  //是否显示刷新按钮
                            // detailView: true,                   //是否显示父子表
                            // showExport: true,                   //是否显示导出
                            // exportDataType: "basic",              //basic', 'all', 'selected'.
                            // clickToSelect: true,                //是否启用点击选中行
                            // singleSelect: true,
                            height: 400,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                            columns: [
                                 {
                                    field: 'id',
                                    title: '编号',
                                    visible :false,
                                    editable: false,
                                }, {
                                    field: 'version',
                                    title: '版本',
                                    editable: false,
                                    formatter: function (value) {
                                        return "<a href='#'>"+value+"</a>";
                                    }
                                }, {
                                    field: 'evaldate',
                                    title: '评估日期',
                                    visible :true,
                                    editable: false,
                                    formatter: function (code) {
                                        return new Date(code).format("yyyy-MM-dd")
                                    }
                                }, {
                                    field: 'trainer',
                                    title: '负责训练者',
                                    visible :true,
                                    editable: false,
                                }, {
                                    field: 'advocate',
                                    title: '咨询评估师',
                                    visible :true,
                                    editable: false,
                                }]
                        });
                        
                        $('#selectVersion').modal('show');
                        
                    	$('#versionlist').on('dbl-click-row.bs.table', function (e, row, element) 
                    			{
                    				//$(element).css({"color":"blue","font-size":"16px;"});
                    				console.log(row);
                    				window.open('/child/viewEvalContext/'+JSON.stringify(row));
                    				
                    	});
                    	
                    	$('#versionlist').on('click-cell.bs.table', function (e, field, value, row, element) 
                    			{
                    				//$(element).css({"color":"blue","font-size":"16px;"});
                    				if(field=="version"){
                        				window.open('/child/viewEvalContext/'+JSON.stringify(row));
                    				}
                    				
                    				
                    	});
                    	
                    	$("#versionlist").bootstrapTable('refresh', {url:'/child/versionAll/'+childId});
                });

            
            
            /* 分配资源权限 */
            $('#tablelist').on('click', '.btn-evaluation', function () {
                console.log("开始评估");
                var $this = $(this);
                var rolesId = $this.attr("data-id");
                $.ajax({
                    async: false,
                    type: "POST",
                    data: {rid: '1'},
                    url: '/resources/resourcesWithSelected',
                    dataType: 'json',
                    success: function (json) {
                        var data = json.data;
                        console.log(data);
                        var setting = {
                            check: {
                                enable: true,
                                chkboxType: {"Y": "ps", "N": "ps"},
                                chkStyle: "checkbox"
                            },
                            data: {
                                simpleData: {
                                    enable: true
                                }
                            },
                            callback: {
                                onCheck: function (event, treeId, treeNode) {
                                    console.log(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);
                                    var treeObj = $.fn.zTree.getZTreeObj(treeId);
                                    var nodes = treeObj.getCheckedNodes(true);
                                    var ids = new Array();
                                    for (var i = 0; i < nodes.length; i++) {
                                        //获取选中节点的值
                                        ids.push(nodes[i].id);
                                    }
                                    console.log(ids);
                                    console.log(rolesId);
                                    $.post(options.saveRolesUrl, {"roleId": rolesId, "resourcesId": ids.join(",")}, function (obj) { }, 'json');
                                }
                            }
                        };
                        var tree = $.fn.zTree.init($("#treeEvaluation"), setting, data);
                        tree.expandAll(true);//全部展开

                        $('#selectEvaluationContent').modal('show');
                    }
                });
            });
            
        });
        
        
    </script>
</@footer>